<template>
  <div class="bg-f2">
    <div class="bg-f2 bg-fff">
      <div class="addMargin">
        <el-button type="success" size="medium" icon="el-icon-plus" :disabled="quanxianBtns.btn1" @click="addRole('新增角色')" class="btnSizeStyle">添加角色</el-button>
      </div>
      <el-card>
        <el-table
          :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
          ref="multipleTable"
          :data="roleList"
          stripe
          border
          highlight-current-row
          style="width: 100%"
          :default-sort="{ prop: 'deviceName' }"
          v-loading="tableLoad"
        >
          <!-- 提示语句 -->
          <template slot="empty">{{ tableMessage }}</template>
          <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
          <el-table-column prop="jsmc" label="角色名称" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="jsms" label="角色描述"></el-table-column>
          <el-table-column label="用户数量">
            <template slot-scope="scope">
              {{ scope.row.yhsl }}
              <!-- <span class="usersNumber"></span> -->
            </template>
          </el-table-column>
          <el-table-column label="添加人" prop="createBy" min-width="100"></el-table-column>
          <el-table-column prop="CJSJ" label="添加时间"></el-table-column>
          <el-table-column label="操作" align="right">
            <template slot-scope="scope">
              <el-button v-show="scope.row.id === 26 ? false : true" type="text" :disabled="quanxianBtns.btn2" @click="addRole('编辑角色', scope.row)">编辑</el-button>
              <span class="operation" v-show="scope.row.id === 26 ? false : true"></span>
              <el-button v-show="scope.row.id === 26 ? false : true" type="text" class="color_f56f6f" :disabled="quanxianBtns.btn3" @click="deteleRole(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog title="删除" :visible.sync="dialogVisible" width="30%">
          <span>您确定要删除吗？</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="deleteItem2">确 定</el-button>
          </span>
        </el-dialog>
        <div class="pageFloat">
          <el-pagination
            background
            small
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="total"
          ></el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { pinT } from '../../utils/allUrl.js'
// import { endLoading } from '../../utils/loading.js'
import { getUrl } from '../../utils/getUrl.js'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
export default {
  data: function () {
    return {
      currentPage: 1, // 页码
      pageSize: 10, // 页数
      roleList: [], // 角色数据源
      total: 0, // 总数
      dialogVisible: false, // 删除
      deleteID: '', // 删除的id
      quanxianBtns: {
        btn1: true,
        btn2: true,
        btn3: true,
      },
      tableLoad: false,
      tableTimer: null,
      tableMessage: '',
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.roleList = []
          this.tableMessage = tableMessageText
          // this.total = 0
        }
      }, timeLoad)
    },
  },
  created: function () {
    // 获取权限
    this.jurisdictionBtn()
    // 获取数据
    this.getList()
  },
  methods: {
    // 获取按钮权限
    jurisdictionBtn() {
      const menus = JSON.parse(getUrl('jurisdiction'))
      menus.forEach((item) => {
        if (item.qxdm === 'PTPZ_JSGL_JSLB') {
          item.children.forEach((item2) => {
            if (item2.qxdm === 'juese:insertJueSe') {
              this.quanxianBtns.btn1 = false // 角色新增
            } else if (item2.qxdm === 'juese:updateJueSe') {
              this.quanxianBtns.btn2 = false // 角色修改
            } else if (item2.qxdm === 'juese:deleteJueSes') {
              this.quanxianBtns.btn3 = false // 角色删除
            }
          })
        }
      })
    },
    // 获取数据
    getList() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const params = new URLSearchParams()
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      this.setList(params)
      // const { data: res } = await this.$http.post(`${pinT}juese/selectJueSe`, params)
      // // clearTimeout(a)
      // // endLoading()
      // if (res.code === '0014') {
      //   return ''
      // } else if (res.code === '0013') {
      //   this.total = 0
      //   return (this.rolelist = [])
      // } else if (res.code !== '0000') {
      //   return this.$message({
      //     type: 'error',
      //     message: res.message,
      //     center: true,
      //   })
      // }
      // this.roleList = res.data.list
      // this.total = res.data.countList
      // // this.roleList = res.data
      // // this.total = res.data.length
    },
    async setList(params) {
      const { data: res } = await this.$http.post(`${pinT}juese/selectJueSe`, params)
      switch (res.code) {
        case '0000':
          this.roleList = res.data.list
          this.total = res.data.countList
          break
        default:
          this.roleList = []
          this.total = 0
          this.tableMessage = res.message
          break
      }
      this.tableLoad = false // 表格加载中样式
    },
    handleSizeChange(newsize) {
      this.currentPage = 1
      this.pageSize = newsize
      this.getList()
    },
    handleCurrentChange(newChange) {
      this.currentPage = newChange
      this.getList()
    },
    // 添加/修改
    addRole(title, scope) {
      if (title === '新增角色') {
        this.$router.push({
          name: 'addRole',
          query: {
            title: title,
          },
        })
      } else {
        this.$router.push({
          name: 'addRole',
          query: {
            title: title,
            id: scope.id,
            jsmc: scope.jsmc,
            jsms: scope.jsms,
          },
        })
      }
    },
    // 删除
    deteleRole(scope) {
      if (scope.yhsl > 0) {
        return this.$message({
          type: 'error',
          message: '请先角色解除绑定的用户!',
          center: true,
        })
      }
      this.deleteID = scope.id
      this.dialogVisible = true
    },
    async deleteItem2() {
      const params = new URLSearchParams()
      params.append('ids', this.deleteID)
      const { data: res } = await this.$http.post(`${pinT}juese/deleteJueSes`, params)
      if (res.code === '0014') {
        return ''
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.$message({
        type: 'success',
        message: res.message,
        center: true,
      })
      // if (this.roleList)
      console.log(this.roleList.length)

      this.dialogVisible = false
      this.getList()
    },
  },
}
</script>
<style lang="scss" scoped>
.addMargin {
  // height: 55px;
  // line-height: 67px;
  margin-bottom: 15px;
  // .addRole {
  //   width: 105px;
  //   height: 35px;
  //   line-height: 35px;
  //   background: rgba(103, 194, 58, 1);
  //   font-size: 14px;
  //   color: #fff;
  //   padding: 0;
  //   text-align: center;
  // }
}
.operation {
  display: inline-block;
  margin: 0 5px;
  height: 10px;
  border-left: 1.5px solid #b3b3b3;
}
.usersNumber {
  color: rgba(46, 146, 247, 1);
}
.el-card {
  border-radius: 0;
}
.pageFloat {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 48px;
}
</style>
